<template>
  <div class="top-bar">
    <div class="big-title">南宁智能化社会治安防控体系</div>
    <div class="weather">
      <div class="img-box">
        <img src="@/assets/image/home/weather.png" alt>
      </div>
      <span>29度</span>
      <span>多云转晴</span>
    </div>
    <div class="t-date">
      <div class="img-box">
        <img src="@/assets/image/home/time.png" alt>
      </div>
      <span>{{dateTime}}</span>
    </div>
    <div class="top-nav">
      <div
        class="nav-item"
        v-for="item in navLlist"
        :class="{'light':lightIndex == item.id}"
        @click="selectModel(item)"
      >
        <span>{{item.title}}</span>
      </div>
    </div>
  </div>
</template>


<script>
import { ref, toRefs, reactive } from "vue";
import moment from "moment";

export default {
  setup(props) {
    const lightIndex = ref(1);
    const state = reactive({
      navLlist: [
        { title: "首页概览", id: 1 },
        { title: "圈层查控", id: 2 },
        { title: "单元防控", id: 3 },
        { title: "要素管控", id: 4 },
        { title: "政务服务", id: 5 },
        { title: "基础工程", id: 6 }
      ],
      dateTime: moment(new Date().getTime()).format("YYYY-MM-DD")
    });
    const selectModel = item => {
      lightIndex.value = item.id;
    };

    return {
      ...toRefs(state),
      lightIndex,
      selectModel
    };
  }
};
</script>


<style lang="scss" scope>
.top-bar {
  z-index: 2;
  width: 100%;
  height: 52px;
  display: flex;
  justify-content: space-between;
  padding: 0 70px;
  background-image: url("@/assets/image/home/header-title.png");
  background-size: 100% 100%;
  position: relative;
  padding-top: 10px;
  margin-bottom: 30px;
  .big-title {
    font-size: 27px;
    font-family: ShiShangZhongHeiJianTi;
    font-weight: 400;
    color: #ffffff;
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .weather,
  .t-date {
    font-family: Source Han Sans CN;
    font-weight: bold;
    height: 22px;
    color: #ffffff;
    @include flex;
    @include flex-middle;
    .img-box {
      width: 22px;
      height: 22px;
      margin-right: 12px;
    }
    span {
      margin-right: 8px;
    }
  }

  .top-nav {
    @include flex;
    height: 34px;
    top: 28px;
    left: 460px;
    position: absolute;
    .nav-item {
      width: 127px;
      height: 34px;
      text-align: center;
      line-height: 30px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #fff;
      opacity: 1;
      background-image: url("@/assets/image/home/tab-dark.png");
      background-size: 100% 100%;
      cursor: pointer;
      &.light {
        background-image: url("@/assets/image/home/tab-light.png");
      }
      &:nth-child(3) {
        margin-right: 520px;
      }
    }
  }
}
</style>
